<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="订单详情"
      left-arrow
      @click-left="back"
    />
    <img class="banner" src="../../assets/orderbanner.png" alt="" />
    <van-steps :active="active" active-icon="success" active-color="#45b7cb">
      <van-step>待进行</van-step>
      <van-step>待评价</van-step>
      <van-step>已完结</van-step>
    </van-steps>
    <div class="cell">
      <div>服务名称</div>
      <div>房源录入</div>
    </div>
    <div class="cell">
      <div>预约时间</div>
      <div>2021-10-01 09：10</div>
    </div>
    <div class="cell">
      <div>服务时间</div>
      <div>2021-10-03 13：00</div>
    </div>
    <div class="cell">
      <div>结束时间</div>
      <div>2021-10-03 16：00</div>
    </div>
    <div class="cell">
      <div>服务名称</div>
      <div>房源录入</div>
    </div>
    <div class="cell">
      <div>服务名称</div>
      <div>房源录入</div>
    </div>
    <div class="cell">
      <div>服务名称</div>
      <div>房源录入</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
}
.van-steps {
  margin: 10px 50px;
}
.cell {
  margin: 0 15px;
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  color: #333;
  > div {
    display: flex;
    align-items: center;
    &:first-child {
      font-weight: bold;
    }
  }
}
</style>